<%--@elvariable id="courseName" type="java.lang.String"--%>
<%--@elvariable id="courseInfoList" type="java.util.List"--%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ page import="com.genghis.ptas.course.entity.CourseInfo" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">--%>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en"> <!--<![endif]-->

<!-- Head BEGIN -->
<head>
    <meta charset="utf-8">
    <base href="<%=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+"/scorm/"%> "/>

    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta content="Metronic Shop UI description" name="description">
    <meta content="Metronic Shop UI keywords" name="keywords">
    <meta content="keenthemes" name="author">

    <meta property="og:site_name" content="-CUSTOMER VALUE-">
    <meta property="og:title" content="-CUSTOMER VALUE-">
    <meta property="og:description" content="-CUSTOMER VALUE-">
    <meta property="og:type" content="website">
    <meta property="og:image" content="-CUSTOMER VALUE-">
    <!-- link to image for socio -->
    <meta property="og:url" content="-CUSTOMER VALUE-">

    <!-- Global styles START -->
    <link href="ecommerce/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="ecommerce/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- Global styles END -->

    <!-- Page level plugin styles START -->
    <link href="ecommerce/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <!-- for slider-range -->
    <link href="ecommerce/plugins/bxslider/jquery.bxslider.css" rel="stylesheet">
    <link href="ecommerce/plugins/rateit/src/rateit.css" rel="stylesheet" type="text/css">
    <link href="ecommerce/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
    <!-- Page level plugin styles END -->

    <!-- Theme styles START -->
    <link href="ecommerce/css/style-metronic.css" rel="stylesheet" type="text/css">
    <link href="ecommerce/css/style.css" rel="stylesheet" type="text/css">
    <link href="ecommerce/css/style-responsive.css" rel="stylesheet" type="text/css">
    <link href="ecommerce/css/custom.css" rel="stylesheet" type="text/css">
    <%List<CourseInfo> courseSystemList = (List<CourseInfo>) request.getAttribute("courseSystemList");%>
    <%Boolean isLogin = (Boolean) request.getAttribute("isLogin");%>
    <!-- Theme styles END -->
</head>
<!-- Head END -->

<!-- Body BEGIN -->
<body>
<div class="main">
    <div class="container" style="margin-top: 20px">
        <!-- BEGIN SIDEBAR & CONTENT -->
        <div class="row margin-bottom-40">
            <!-- BEGIN SIDEBAR -->
            <div class="sidebar col-md-3 col-sm-5">
                <div class="sidebar-products clearfix">
                    <h2>系统推荐</h2>
                    <%for (int i = 0; i < 8; i++) {%>
                    <div class="item">
                        <a href="javascript:void(0);" onclick="watchCourseInfo('<%=courseSystemList.get(i).getId()%>')">
                            <img src="<%=courseSystemList.get(i).getPhotoUrl()%>"
                                 alt="<%=courseSystemList.get(i).getPhotoUrl()%>">
                        </a>

                        <h3><a href="javascript:void(0);"
                               onclick="watchCourseInfo('<%=courseSystemList.get(i).getId()%>')">
                            <%=courseSystemList.get(i).getCourseName()%>
                        </a></h3>

                        <div class="price">
                            <%=courseSystemList.get(i).getAverageScore()%>
                        </div>
                    </div>
                    <%}%>
                </div>
            </div>
            <!-- END SIDEBAR -->
            <!-- BEGIN CONTENT -->
            <div class="col-md-9 col-sm-7">
                <div class="content-search margin-bottom-20">
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <h1>查询结果&nbsp;&nbsp;
                                <small><em>${courseName}</em></small>
                            </h1>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <form>
                                <div class="input-group">
                                    <input id="content" type="text" placeholder="课件查询..." class="form-control">
                      <span class="input-group-btn">
                        <button class="btn btn-primary" type="submit" onclick="queryResult()">查询</button>
                      </span>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="row list-view-sorting clearfix">
                    <div class="col-md-2 col-sm-2 list-view">
                        <a href="#"><i class="fa fa-th-large"></i></a>
                        <a href="#"><i class="fa fa-th-list"></i></a>
                    </div>
                    <div class="col-md-10 col-sm-10">
                    </div>
                </div>
                <!-- BEGIN PRODUCT LIST -->
                <div class="row product-list">
                    <c:forEach var="courseInfo" items="${courseInfoList}">
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="product-item">
                                <div class="pi-img-wrapper">
                                    <img src="${courseInfo.photoUrl}" class="img-responsive" alt="Berry Lace Dress"
                                         style="width: 250px;height: 155px">

                                    <div>
                                        <%if (isLogin) {%>
                                        <a href="javascript:void(0);" class="btn btn-default"
                                           onclick="registerCourse('${courseInfo.id}')">注册</a>
                                        <%}%>
                                        <a href="javascript:void(0);" class="btn btn-default"
                                           onclick="watchCourseInfo('${courseInfo.id}')">课件信息</a>
                                    </div>
                                </div>
                                <h3><a href="javascript:void(0);"
                                       onclick="watchCourseInfo('${courseInfo.id}')">${courseInfo.courseName}</a></h3>

                                <div class="pi-price">${courseInfo.averageScore}</div>
                                <a href="javascript:void(0);" class="btn btn-default add2cart"
                                   onclick="collectionCourse('${courseInfo.id}')">收藏</a>
                            </div>
                        </div>
                    </c:forEach>
                </div>
                <!-- END PRODUCT LIST -->
            </div>
            <!-- END CONTENT -->
        </div>
        <!-- END SIDEBAR & CONTENT -->
    </div>
</div>

<!-- Load javascripts at bottom, this will reduce page load time -->
<!-- BEGIN CORE PLUGINS(REQUIRED FOR ALL PAGES) -->
<!--[if lt IE 9]>
<script src="ecommerce/plugins/respond.min.js"></script>
<![endif]-->
<script src="ecommerce/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="ecommerce/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="ecommerce/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="ecommerce/plugins/back-to-top.js"></script>
<script type="text/javascript" src="ecommerce/plugins/jQuery-slimScroll/jquery.slimscroll.min.js"></script>
<!-- END CORE PLUGINS -->

<!-- BEGIN PAGE LEVEL JAVASCRIPTS(REQUIRED ONLY FOR CURRENT PAGE) -->
<script src="<c:url value="/js/common/jquery-easyui-1.3.4/jquery.easyui.min.js"/>" type="text/javascript"></script>
<script src="<c:url value="/js/common/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"/>"
        type="text/javascript"></script>
<script src="<c:url value="/js/common/common.js"/>" type="text/javascript"></script>
<script type="text/javascript" src="ecommerce/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="ecommerce/plugins/bxslider/jquery.bxslider.min.js"></script>
<!-- slider for products -->
<script src="ecommerce/plugins/rateit/src/jquery.rateit.js" type="text/javascript"></script>
<script type="text/javascript" src='ecommerce/plugins/zoom/jquery.zoom.min.js'></script>
<!-- product zoom -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- for slider-range -->
<script src="ecommerce/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<script src="ecommerce/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>
<!-- Quantity -->
<script src="<c:url value="/js/common/common.js"/>" type="text/javascript"></script>
<base href="<%=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()%><c:url value="/"/>"/>
<script type="text/javascript" src="ecommerce/scripts/app.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function () {
        App.init();
        App.initBxSlider();
        App.initImageZoom();
        App.initSliderRange();
        App.initUniform();
        App.initTouchspin();
    });

    function queryResult() {
        parent.addTab("queryResultList?query=" + $("#content").val());
    }

    function registerCourse(courseId) {
        $.ajax({
            url: basePath + "courseRegister/addCourseRegister",
            async: false,
            data: {
                courseId: courseId,
                totalTime: "0000:00:00.00"
            },
            dataType: "json",
            type: "POST",
            success: function (judge) {
                if (judge) {
                    parent.bootbox.alert("注册成功！");
                } else {
                    parent.bootbox.alert("您已注册可以直接观看！");
                }

            },
            error: function () {
                parent.bootbox.alert("注册失败！");
            }
        })
    }

    function watchCourseInfo(courseId) {
        location.href = basePath + "course/courseInfoDo?id=" + courseId;
    }

    function collectionCourse(courseId) {
        $.ajax({
            url: basePath + "courseRegister/collectionCourse",
            async: false,
            data: {
                courseId: courseId
            },
            dataType: "json",
            type: "POST",
            success: function (judge) {
                if (judge) {
                    parent.bootbox.alert("收藏成功！");
                } else {
                    parent.bootbox.alert("您已收藏！");
                }
            },
            error: function () {
                parent.bootbox.alert("请先登录！");
            }
        })
    }
</script>
<!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>